<template>
    <div class="common-layout">
        <el-container>
            <el-header>
            </el-header>
            <el-main>
                <el-table :data="list" height="100%" style="width: 100% height:100%">
                    <el-table-column fixed prop="date" label="创建时间" width="150" height="80" />
                    <el-table-column prop="name" label="创建人" width="180" height="80">
                        <template #default="scope">
                            <el-tag>{{ scope.row.name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" label="文件ID" width="180" height="80" />
                    <el-table-column prop="sity" label="状态" width="180" height="80" />
                    <el-table-column prop="FileName" label="文件类型" width="150" height="80" />
                    <el-table-column prop="zip" label="文件格式" width="180" height="80" />
                    <el-table-column fixed="right" label="操作" width="180" height="80">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="handleClick(scope.$index, scope.row)">删除</el-button>
                            <el-button link type="primary" size="small">下载</el-button>
                            <!-- <el-button link type="primary" size="small" @click="dialogVisible = true">查看</el-button> -->
                            <!-- <a href="E:/联合项目/my-office-oa/OA系统管理/OA/src/Document/通知.docx" download="通知.docx">下载</a> -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>

                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                        :page-sizes="[10, 200, 300, 400]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-footer>
        </el-container>
    </div>
    <el-dialog v-model="centerDialogVisible" title="确认删除文件？" width="30%" draggable>
        <span>
            您确认删除以后的30天以内还可以在回收站里面找回该文件，是否确认删除？
        </span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="OkDelete()" type="primary">确认</el-button>
                <el-button @click="centerDialogVisible = false">
                    取消
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import type { Ref } from 'vue'
import List from './Data/Array'
import { onMounted, ref } from "vue";
const centerDialogVisible = ref(false)
//要删除的文件的下标
const FileNumber = ref()
//删除文件
const handleClick = (id, it) => {
    centerDialogVisible.value = true
    FileNumber.value = id
}
const OkDelete = () => {
    tableData.value.splice(FileNumber.value, 1)
    centerDialogVisible.value = false
}
const dialogVisible = ref(false)
interface FileList {
    id: number,
    date: string,
    name: string,
    FileName: string,
    sity: string,
    address: string,
    zip: string,
}
//是否查询状态
const Query = ref(false)
//查询到的条数暂存数组
const QueryList: Ref<Array<FileList>> = ref([])
// 总数组
const tableData: Ref<Array<FileList>> = ref([])
//页面显示数据数组
const list: Ref<Array<FileList>> = ref([])
//页数
const currentPage4 = ref(1)
//每页条数
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
onMounted: {
    tableData.value = List
    list.value = tableData.value
}
//删除点击的文件
//每页条数改变时
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
}
// 页数改变
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    let arr = tableData.value
    // list.value = tableData.value.splice(pageSize4.value-1,currentPage4.value*pageSize4.value-1)
    //如果翻页后每页应该展示的条数加上已经展示的条数大于总条数
    if (currentPage4.value * pageSize4.value - 1 >= tableData.value.length) {
        list.value = arr.slice()
        tableData.value = List
    }
    //如果小于
    if (currentPage4.value * pageSize4.value - 1 < tableData.value.length) {
        // console.log(val);
        list.value = arr.splice(val - 1, currentPage4.value * pageSize4.value)
        // console.log(tableData.value);
        tableData.value = List
        // console.log(List);

    }
    tableData.value = List
}
</script>
<style lang="less" scoped>
.common-layout {
    display: block;
    position: relative;
    height: 673.6px;
    background: white;
    // overflow: auto;

    >.el-container {
        display: block;
        position: relative;
        height: 100%;
        background: white;
        // overflow: hidden;
        >footer,
        >main,
        >header {
            // height: 48px;
            padding: 8px 12px;
            height: 100%;
        }
        >footer,
        >header {
            text-align: right;
            background-color: white;
            // border-bottom: 1px solid rgb(181, 178, 178);
        }
        >header {
            border-bottom: solid 2px #ddd;
            height: 64px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .el-input {
                width: 150px;
                height: 80%;
                // margin-right: 18px;
            }
            >.el-button {
                height: 80%;
            }
        }
        >footer {
            border-top: solid 1px #ddd;
            height: 48px;
            >.el-pagination {
                float: right;
            }
            >.demo-pagination-block {
                height: 100%;
                line-height: 100%;

                >.el-pagination {
                    display: flex;
                    flex-direction: row;
                    justify-content: end;
                    padding-right: 15px;
                }
            }
        }
        >main {
            height: calc(100% - 48px - 64px);

            // overflow: hidden;
            // overflow-x: hidden;
            // overflow-y: hidden;
            &.no-footer {
                height: calc(100% - 64px);
            }
            >.el-table {
                height: calc(100%-16px);
            }
        }
    }
}

a {
    text-decoration: none;
}
</style>